<template>
  <div>
    <div class="maintop">
      <span class="record">提现记录</span>
      <select class="select bg-c1" v-model="select" @change="handleSlect(select)">
        <option value="3">USDT</option>
        <option value="1">GIC</option>
      </select>
    </div>
    <div class="putforwardbox">
      <ul class="tabsItems_item" v-for="(list, index) of putdata" :key="index">
        <li>
          <h2>币种</h2>
          <p>GIC</p>
        </li>
        <li>
          <h2>时间</h2>
          <p>{{list.withdrawTime | handleTime}}</p>
        </li>
        <li>
          <h2>金额</h2>
          <p>{{list.amount || 0 | twoFloat}}</p>
        </li>
        <li>
          <h2>状态</h2>
          <p>{{ list.status | mystatus }}</p>
        </li>
      </ul>
    </div>
    <div class="warn c5" v-if="!putdata.length">暂无数据...</div>
  </div>
</template>

<script>
import * as z from "@/utils/com.js";
import { Indicator } from "mint-ui";

export default {
  created() {
    this.getWithdrawList();
  },
  data() {
    return {
      select: "1",
      putdata1: [],
      putdata: [],
      userid: "",
      pagetotal: "",
      page: 0,
      pageSize: 30,
      more: true
    };
  },
  filters: {
    mystatus: function(value) {
      if (value == 0) {
        return (value = "待审核");
      }
      if (value == 1) {
        return (value = "已到账");
      }
      if (value == 2) {
        return (value = "异常");
      }
    }
  },
  methods: {
    async handleSlect(select) {
      Indicator.open();
      let res = await this.$http.post(
        "/bus/withdraw/page",
        this.$qs.stringify({
          pageNum: this.page,
          withdrawType: select,
          pageSize: this.pageSize
        })
      );
      Indicator.close();
      this.putdata = res.data.data.rsList;
    },
    async getWithdrawList() {
      this.userid = JSON.parse(localStorage.getItem("localdata")).uuid;
      Indicator.open();
      let response = await this.$http.post(
        "/bus/withdraw/page",
        this.$qs.stringify({
          withdrawType: 1,
          userId: this.userid,
          pageNum: this.page,
          pageSize: this.pageSize
        })
      );
      Indicator.close();
      if (200 == response.data.code) {
        this.putdata = response.data.data.rsList; 
      } else {
        z.alert(response.data.msg);
      }
    }
  }
};
</script>
<style scoped>
.maintop {
  width: 7.5rem !important;
}
.maintop {
  position: fixed;
  z-index: 2;
  height: 0.8rem;
  width: 100%;
  font-size: 0.24rem;
  background: #fff;
  text-align: center;
  line-height: 0.8rem;
  box-shadow: #e7e7e7 0.03rem 0.03rem 0.09rem 0.03rem;
}

.maintop .record {
  font-size: 16px;
}
.maintop .select {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 0.5rem;
  border-radius: 1px;
  font-size: 12px;
}

.putforwardbox {
  overflow-y: scroll;
  position: fixed;
  z-index: 1;
  top: 0.74rem;
  bottom: 1.12rem;
  /* left: 0; */
  width: 7.5rem !important;
  margin: 0 auto;
}

.putforwardbox ul {
  display: flex;
}

.putforwardbox ul li {
  font-size: 0;
  flex: 1;
  text-align: center;
  padding-bottom: 0.25rem;
  border-bottom: 0.02rem solid #ccc;
}

.putforwardbox ul li h2 {
  font-size: 0.32rem;
  color: #ccc;
  padding-top: 0.25rem;
}

.putforwardbox ul li p {
  font-size: 0.32rem;
  color: #000;
  padding-top: 0.25rem;
  vertical-align: bottom;
}

.putforwardbox ul li span {
  font-size: 0.32rem;
  color: #000;
  display: block;
  padding-top: 0.25rem;
  color: #5d77b3;
}

.putforwardbox ul li input {
  margin-top: 0.3rem;
}
.warn {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
